import React, { useState, useEffect } from 'react'
import './modal.css'
/**
 * 
 * @param {visible boolean} props 控制显示 
 * @returns 
 */

// 复用性高 弹窗
const Modal = (props) => {
    const { visible: show, title, children } = props;
    const [visible, setVisible] = useState(false)
    const { onClose, onConfirm } = props;
    const closeModal = () => {
        setVisible(false)
        onClose && onClose()
    }
    const confirm = () => {
        console.log('确认吗？')
        setVisible(false)
        onConfirm && onConfirm()
        // 传了onConfirm就执行onConfirm()
    }
    const maskClick = () => {
        setVisible(false)
        onClose && onClose()
    }
    useEffect(() => {
        setVisible(show)
        console.log('test useEffect')
    }, [show])
    // 根据 props 更新，牛！
    return (
        visible && <div className='modal-wrapper'>
            <div className="modal">
                <div className="modal-title">{title}</div>
                <div className="modal-content">{children}</div>
                <div className="modal-operator">
                    <button
                        className='modal-operator-close'
                        onClick={closeModal}
                    >取消</button>
                    <button
                        className='modal-operator-confirm'
                        onClick={confirm}
                    >确认</button>
                </div>
            </div>
            <div className="mask" onClick={maskClick}></div>
            {/* 遮罩层 */}
        </div>
    )
}

export default Modal